<template>

</template>

<script>
export default {

}
</script>

<style>
.tan-swiper-wrapper {
	width: 100%;
	height: 100%;
	position: relative;
}

.tan-swiper-image-list, .tan-swiper-image-list-item {
	width: 100%;
	height: 100%;
}

.tan-swiper-image-list {
	position: relative;
}

.tan-swiper-image-list-item {
	background-size: 100%;
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transition: all .3s;
}

.tan-swiper-image-list-item.active {
	opacity: 1;
}

.tan-swiper-btn {
	position: absolute;
	top: calc(50% - 34.5px);
	width: 41px;
	height: 69px;
}

.tan-swiper-btn-pre {
	background: url(../assets/icon-slides.png) no-repeat -84px 50%;
	left: 0;
}

.tan-swiper-btn-next {
	background: url(../assets/icon-slides.png) no-repeat -125px 50%;
	right: 0;
}

.tan-swiper-btn-pre:hover {
	background-position: 0 50%;
}

.tan-swiper-btn-next:hover {
	background-position: -42px 50%;
}

.tan-swiper-circle-list {
	width: 100%;
	height: 40px;
	display: flex;
	justify-content: center;
	position: absolute;
	bottom: 0;
}

.tan-swiper-circle-list-item,
.tan-swiper-circle-list-item > span {
    width: 50px;
}

.tan-swiper-circle-list-item {
    padding: calc((40px -3px) / 2) 0;
    margin: 0 4px;
    cursor: pointer;
}

.tan-swiper-circle-list-item > span {
    display: block;
    background: #ccc;
    border-radius: 0;
    border: 0;
    height: 3px;
    transition: all .3s; 
}

.tan-swiper-circle-list-item:hover > span,
.tan-swiper-circle-list-item.active > span {
    background: #a3a3a3;
}
</style>